<template>
    <div class="mt-20">
        <div class="nav mb-40">
            <div v-for="(item,index) in navList" :key="index" class="list" @click="goPath(item.path,item.name)">
                <div class="imgBox"><img :src="item.icon" alt=""></div>
                <div class="mt-15 text-center">{{item.name}}</div>
            </div>
        </div>
        <div class="nav mb-44">
            <div v-for="(item,index) in navList1" :key="index" class="list" @click="goPath(item.path,item.name)">
                <div class="imgBox"><img :src="item.icon" alt=""></div>
                <div class="mt-15 text-center">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { THEME } from '@/config/theme'
    export default {
        props: {

        },
        components: {

        },
        data(){
            return {
                navList:[
                    {
                        name: this.$t('闪兑'),
                        icon: require(`../../assets/theme/${THEME}/image/nav/exchange.png`),
                        path: '/exchange/exchangePage'
                    },
                    // {
                    //     name: this.$t('返佣'),
                    //     icon: require(`../../assets/theme/${THEME}/image/nav/rebates.png`),
                    //     path:'/promote'
                    // },
                  {
                    name: 'c2c',
                    icon: require(`../../assets/theme/${THEME}/image/nav/rebates.png`),
                    path:'/wantBuy'
                  },
                    {
                        name: this.$t('合约交易'),
                        icon: require(`../../assets/theme/${THEME}/image/nav/trading.png`),
                        path: '/trendDetails/btc'
                    },
                    {
                        name: this.$t('理财'),
                        icon: require(`../../assets/theme/${THEME}/image/nav/finance.png`),
                        path: '/fm-home'
                    },
                    {
                        name: this.$t('现货账户'),
                        icon: require(`../../assets/theme/${THEME}/image/nav/account.png`),
                        path: '/funds'
                    },
                ],
                navList1:[
                    {
                        name: this.$t('基金理财'),
                        icon: require(`../../assets/theme/${THEME}/image/nav/coin.png`),
                        path: '/fund'
                    },
                    {
                        name: this.$t('智能矿池'),
                        icon: require(`../../assets/theme/${THEME}/image/nav/pool.png`),
                        path: '/machine'
                    },
                    {
                        name: this.$t('质押借币'),
                        icon: require(`../../assets/theme/${THEME}/image/nav/pledge.png`),
                        path: '/pledgeLoan'
                    },
                    {
                        name: this.$t('账变记录'),
                        icon: require(`../../assets/theme/${THEME}/image/nav/record.png`),
                        path: '/accountChange'
                    },
                    {
                        name: this.$t('更多'),
                        icon: require(`../../assets/theme/${THEME}/image/nav/more.png`),
                        path: '/more'
                    }
                ]
            }
        },
        methods: {
            goPath(path,name){
                if (path == '/more'){
                    this.$toast(this.$t("敬请期待"))

                }else{
                    this.$router.push(path)
                }
            }
        },
        activated() {
            this.navList=[
                {
                    name: this.$t('闪兑'),
                    icon: require(`../../assets/theme/${THEME}/image/nav/exchange.png`),
                    path: '/exchange/exchangePage'
                },
                // {
                //     name: this.$t('返佣'),
                //     icon: require(`../../assets/theme/${THEME}/image/nav/rebates.png`),
                //     path: '/promote'
                // },
              {
                name: 'c2c',
                icon: require(`../../assets/theme/${THEME}/image/nav/rebates.png`),
                path:'/wantBuy'
              },
                {
                    name: this.$t('合约交易'),
                    icon: require(`../../assets/theme/${THEME}/image/nav/trading.png`),
                    path: '/trendDetails/btc'
                },
                {
                    name: this.$t('理财'),
                    icon: require(`../../assets/theme/${THEME}/image/nav/finance.png`),
                    path: '/fm-home'
                },
                {
                    name: this.$t('现货账户'),
                    icon: require(`../../assets/theme/${THEME}/image/nav/account.png`),
                    path: '/funds'
                },
            ]
            this.navList1 = [
                {
                    name: this.$t('基金理财'),
                    icon: require(`../../assets/theme/${THEME}/image/nav/coin.png`),
                    path: '/fund'
                },
                {
                    name: this.$t('智能矿池'),
                    icon: require(`../../assets/theme/${THEME}/image/nav/pool.png`),
                    path: '/machine'
                },
                {
                    name: this.$t('质押借币'),
                    icon: require(`../../assets/theme/${THEME}/image/nav/pledge.png`),
                    path: '/pledgeLoan'
                },
                {
                    name: this.$t('账变记录'),
                    icon: require(`../../assets/theme/${THEME}/image/nav/record.png`),
                    path: '/accountChange'
                },
                {
                    name: this.$t('更多'),
                    icon: require(`../../assets/theme/${THEME}/image/nav/more.png`),
                    path: '/more'
                }
            ]
        },
    }
</script>

<style lang="scss" scoped>

.nav{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #21262F;
}
.list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 50px;
    flex: 1;
    color: $text_color;
    &:last-child{
        margin-right: 0px;
    }
}
.imgBox{
    width: 44px;
    height: 44px;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>
